// 颜色系统
// 主色调
$primary-color: #1989fa;
$primary-color-light: #4dabf7;
$primary-color-dark: #1c7ed6;
$primary-color-lighter: #e7f4ff;
$primary-color-darker: #0c5aa6;

// 辅助色
$success-color: #07c160;
$success-color-light: #39d374;
$success-color-dark: #059748;

$warning-color: #ff976a;
$warning-color-light: #ffb088;
$warning-color-dark: #ed6a0c;

$danger-color: #ee0a24;
$danger-color-light: #f44336;
$danger-color-dark: #c5161d;

$info-color: #1989fa;
$info-color-light: #4dabf7;
$info-color-dark: #1c7ed6;

// 中性色
$white: #ffffff;
$black: #000000;

$gray-50: #f9fafb;
$gray-100: #f3f4f6;
$gray-200: #e5e7eb;
$gray-300: #d1d5db;
$gray-400: #9ca3af;
$gray-500: #6b7280;
$gray-600: #4b5563;
$gray-700: #374151;
$gray-800: #1f2937;
$gray-900: #111827;

// 文本颜色
$text-color: #323233;
$text-color-light: #969799;
$text-color-lighter: #c8c9cc;
$text-color-dark: #1f2937;

// 背景颜色
$background-color: #f7f8fa;
$background-color-light: #fafafa;
$background-color-dark: #f2f3f5;

// 边框颜色
$border-color: #ebedf0;
$border-color-light: #f2f3f5;
$border-color-dark: #dcdee0;

// 字体系统
$font-family-base: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
$font-family-number: 'Helvetica Neue', Helvetica, Arial, sans-serif;

// 字体大小
$font-size-xs: 0.24rem;   // 10px
$font-size-sm: 0.28rem;   // 12px
$font-size-base: 0.32rem; // 14px
$font-size-lg: 0.36rem;   // 16px
$font-size-xl: 0.4rem;    // 18px
$font-size-2xl: 0.48rem;  // 20px
$font-size-3xl: 0.56rem;  // 24px
$font-size-4xl: 0.64rem;  // 28px
$font-size-5xl: 0.72rem;  // 32px

// 行高
$line-height-xs: 1.2;
$line-height-sm: 1.3;
$line-height-base: 1.5;
$line-height-lg: 1.6;
$line-height-xl: 1.8;

// 字体粗细
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 间距系统
$spacing-xs: 0.08rem;  // 4px
$spacing-sm: 0.16rem;  // 8px
$spacing-base: 0.32rem; // 16px
$spacing-lg: 0.48rem;  // 24px
$spacing-xl: 0.64rem;  // 32px
$spacing-2xl: 0.8rem;  // 40px
$spacing-3xl: 1.2rem;  // 48px

// 圆角
$border-radius-xs: 0.04rem;  // 2px
$border-radius-sm: 0.08rem;  // 4px
$border-radius-base: 0.16rem; // 8px
$border-radius-lg: 0.24rem;  // 12px
$border-radius-xl: 0.32rem;  // 16px
$border-radius-2xl: 0.48rem; // 24px
$border-radius-full: 50%;

// 阴影
$box-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$box-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$box-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
$box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
$box-shadow-none: none;

// 过渡动画
$transition-duration-fast: 0.15s;
$transition-duration-base: 0.3s;
$transition-duration-slow: 0.5s;

$transition-timing-function-ease: ease;
$transition-timing-function-ease-in: ease-in;
$transition-timing-function-ease-out: ease-out;
$transition-timing-function-ease-in-out: ease-in-out;
$transition-timing-function-linear: linear;

// Z-index层级
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;
$z-index-toast: 1080;
$z-index-loading: 1090;

// 断点
$breakpoint-xs: 0;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-2xl: 1400px;

// 容器最大宽度
$container-max-width-sm: 540px;
$container-max-width-md: 720px;
$container-max-width-lg: 960px;
$container-max-width-xl: 1140px;
$container-max-width-2xl: 1320px;

// 组件特定变量
// 导航栏
$navbar-height: 1.12rem; // 44px
$navbar-background: $white;
$navbar-text-color: $text-color;
$navbar-border-color: $border-color;

// 标签栏
$tabbar-height: 1.25rem; // 50px
$tabbar-background: $white;
$tabbar-text-color: $text-color-light;
$tabbar-active-color: $primary-color;
$tabbar-border-color: $border-color;

// 按钮
$button-height-large: 1.25rem; // 50px
$button-height-normal: 1.12rem; // 44px
$button-height-small: 0.8rem;  // 32px
$button-height-mini: 0.6rem;   // 24px

$button-font-size-large: $font-size-lg;
$button-font-size-normal: $font-size-base;
$button-font-size-small: $font-size-sm;
$button-font-size-mini: $font-size-xs;

$button-border-radius: $border-radius-base;
$button-border-width: 1px;

// 输入框
$input-height: 1.12rem; // 44px
$input-font-size: $font-size-base;
$input-border-radius: $border-radius-base;
$input-border-color: $border-color;
$input-background: $white;
$input-placeholder-color: $text-color-lighter;

// 卡片
$card-background: $white;
$card-border-radius: $border-radius-lg;
$card-padding: $spacing-base;
$card-margin: $spacing-base;
$card-shadow: $box-shadow-sm;

// 列表
$list-item-height: 1.12rem; // 44px
$list-item-padding: $spacing-base;
$list-item-border-color: $border-color;
$list-item-background: $white;

// 弹窗
$popup-background: $white;
$popup-border-radius: $border-radius-xl;
$popup-overlay-background: rgba(0, 0, 0, 0.7);

// 加载
$loading-spinner-size: 0.6rem; // 30px
$loading-spinner-color: $primary-color;

// 消息提示
$toast-background: rgba(0, 0, 0, 0.8);
$toast-text-color: $white;
$toast-border-radius: $border-radius-base;
$toast-padding: $spacing-sm $spacing-base;

// 通知
$notify-background: $primary-color;
$notify-text-color: $white;
$notify-padding: $spacing-base;

// 徽章
$badge-background: $danger-color;
$badge-text-color: $white;
$badge-font-size: $font-size-xs;
$badge-border-radius: $border-radius-full;
$badge-padding: 0.04rem 0.12rem;

// 标签
$tag-background: $gray-100;
$tag-text-color: $text-color;
$tag-border-radius: $border-radius-sm;
$tag-padding: 0.04rem 0.16rem;
$tag-font-size: $font-size-sm;

// 进度条
$progress-height: 0.08rem; // 4px
$progress-background: $gray-200;
$progress-color: $primary-color;
$progress-border-radius: $border-radius-full;

// 分割线
$divider-color: $border-color;
$divider-margin: $spacing-base 0;

// 空状态
$empty-image-size: 2.4rem; // 120px
$empty-text-color: $text-color-light;
$empty-text-font-size: $font-size-base;

// 骨架屏
$skeleton-background: $gray-100;
$skeleton-animation-duration: 1.2s;

// 主题色映射
$theme-colors: (
  'primary': $primary-color,
  'success': $success-color,
  'warning': $warning-color,
  'danger': $danger-color,
  'info': $info-color
);

// 灰度映射
$grays: (
  '50': $gray-50,
  '100': $gray-100,
  '200': $gray-200,
  '300': $gray-300,
  '400': $gray-400,
  '500': $gray-500,
  '600': $gray-600,
  '700': $gray-700,
  '800': $gray-800,
  '900': $gray-900
);

// 字体大小映射
$font-sizes: (
  'xs': $font-size-xs,
  'sm': $font-size-sm,
  'base': $font-size-base,
  'lg': $font-size-lg,
  'xl': $font-size-xl,
  '2xl': $font-size-2xl,
  '3xl': $font-size-3xl,
  '4xl': $font-size-4xl,
  '5xl': $font-size-5xl
);

// 间距映射
$spacings: (
  'xs': $spacing-xs,
  'sm': $spacing-sm,
  'base': $spacing-base,
  'lg': $spacing-lg,
  'xl': $spacing-xl,
  '2xl': $spacing-2xl,
  '3xl': $spacing-3xl
);

// 圆角映射
$border-radiuses: (
  'xs': $border-radius-xs,
  'sm': $border-radius-sm,
  'base': $border-radius-base,
  'lg': $border-radius-lg,
  'xl': $border-radius-xl,
  '2xl': $border-radius-2xl,
  'full': $border-radius-full
);

// 阴影映射
$box-shadows: (
  'xs': $box-shadow-xs,
  'sm': $box-shadow-sm,
  'base': $box-shadow-base,
  'lg': $box-shadow-lg,
  'xl': $box-shadow-xl,
  '2xl': $box-shadow-2xl,
  'inner': $box-shadow-inner,
  'none': $box-shadow-none
);